<template>
  <div class="home-container">
    <div class="top-box">
      <div class="pic1">
        <img
          v-if="detailsList.images && detailsList.images.length > 0"
          :src="'http://127.0.0.1:8000' + detailsList.images[0].image"
          alt=""
        />
      </div>
      <div class="info1">
        <h2>设计师：{{ detailsList.designer.username }}</h2>
        <div class="btns">
          <!-- 投票 -->
          <span v-if="voting" @click="voting_off(0)">
            <svg
              t="1717721422953"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="23118"
              width="30"
              height="30"
            >
              <path
                d="M510.834454 64.090691c-246.797919 0-446.871677 200.073758-446.871677 446.871677 0 246.802012 200.073758 446.873724 446.871677 446.873723 246.802012 0 446.871677-200.069665 446.871677-446.873723-0.001023-246.797919-200.069665-446.871677-446.871677-446.871677z m0 868.546485c-232.883001 0-421.673785-188.789761-421.673785-421.674808 0-232.881978 188.791807-421.673785 421.673785-421.673786 232.886071 0 421.672762 188.79283 421.673785 421.673786 0 232.886071-188.787714 421.674808-421.673785 421.674808z"
                fill="#f06464"
                p-id="23119"
              ></path>
              <path
                d="M446.910563 738.532363c-5.236258 0-10.44284-1.952468-14.21577-5.813402-49.489134-50.720172-129.537262-51.210335-131.189901-51.210336h-0.117681c-10.44284 0-18.968004-7.711636-19.043728-17.272385-0.081864-9.609869 8.332782-17.442254 18.814508-17.549701 3.956102-0.191358 98.505501-0.103354 159.925362 62.84021 7.006578 7.169283 6.320962 18.173918-1.518586 24.583908-3.615341 2.959402-8.146541 4.421706-12.654204 4.421706z m127.597073-0.034792c-4.622274 0-9.267061-1.531889-12.934591-4.649904-7.711636-6.528694-8.18645-17.552771-1.032515-24.602327 63.606667-62.854537 156.236344-62.784952 159.888523-62.644759 10.524704 0.103354 18.952654 7.973602 18.838044 17.58654-0.11461 9.55768-8.599865 17.235546-19.027356 17.235546h-0.150426c-1.581008 0-80.011288 0.471744-131.634016 51.487652-3.730974 3.723811-8.849552 5.587252-13.947663 5.587252z m-33.542954-88.553849h-60.298318c-1.920746 0-3.786233-0.261966-5.559622-0.767479-64.368006-7.556093-119.071909-41.73452-154.328901-96.540754-40.928155-63.656809-50.309826-146.136312-23.309892-205.247594 2.910283-6.355755 9.645684-10.55131 17.185404-10.691503l5.726422-0.051165c36.244482 0 70.097498 6.26775 100.903107 18.665105 22.261003-37.241182 47.679929-65.499783 75.709309-84.164889a19.224854 19.224854 0 0 1 5.059226-2.909259c5.879917-2.331092 12.713556-1.827625 18.093077 1.37737a18.216897 18.216897 0 0 1 2.609431 1.879813c28.101012 18.871813 52.817949 46.713928 75.196633 84.74101 31.413454-12.987802 66.044182-19.569708 103.242385-19.569708l5.820566 0.051166c7.538697 0.140193 14.274098 4.332678 17.181311 10.691503 27.004027 59.125609 17.638729 141.606135-23.326265 205.259874-35.258015 54.775534-89.941452 88.975451-154.293085 96.543823-1.806135 0.455371-3.670599 0.732687-5.610788 0.732687z m-56.914244-34.822086h53.5271c0.399089-0.073678 0.813528-0.121773 1.235131-0.173963 68.804039-7.001461 108.265796-47.37703 129.255853-79.986729 32.135908-49.991578 41.878806-115.318422 25.285896-163.408696-34.630728 1.029446-66.367547 8.79634-94.432743 23.143093-4.586458 2.331092-10.012028 2.821255-14.973016 1.426488-4.987594-1.426489-9.119705-4.682649-11.419074-8.981558-19.291368-36.110429-39.977503-62.681598-62.924122-80.789001-22.962991 18.070564-44.103474 44.833091-62.980403 79.759555-2.299369 4.247744-6.373151 7.452739-11.317766 8.878204a20.554128 20.554128 0 0 1-14.842033-1.303692c-27.473725-13.668301-58.468646-21.10262-92.16919-22.113647-16.58984 48.093345-6.848988 113.417119 25.285896 163.390278 20.990057 32.609699 60.429301 72.970942 129.216967 79.986729 0.414439 0.051165 0.832971 0.099261 1.251504 0.172939z m26.621311 165.641551c-10.504238 0-19.027355-7.78429-19.027356-17.412579v-130.819464c0-9.628288 8.522094-17.409508 19.027356-17.409508 10.501168 0 19.027355 7.78122 19.027355 17.409508v130.819464c-0.017396 9.628288-8.526187 17.412578-19.027355 17.412579z"
                fill="#f06464"
                p-id="23120"
              ></path>
            </svg>
            <i>已投票</i>
          </span>
          <span v-else @click="voting_off(1)">
            <svg
              t="1717721422953"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="23118"
              width="30"
              height="30"
            >
              <path
                d="M510.834454 64.090691c-246.797919 0-446.871677 200.073758-446.871677 446.871677 0 246.802012 200.073758 446.873724 446.871677 446.873723 246.802012 0 446.871677-200.069665 446.871677-446.873723-0.001023-246.797919-200.069665-446.871677-446.871677-446.871677z m0 868.546485c-232.883001 0-421.673785-188.789761-421.673785-421.674808 0-232.881978 188.791807-421.673785 421.673785-421.673786 232.886071 0 421.672762 188.79283 421.673785 421.673786 0 232.886071-188.787714 421.674808-421.673785 421.674808z"
                fill="#bfbfbf"
                p-id="23119"
              ></path>
              <path
                d="M446.910563 738.532363c-5.236258 0-10.44284-1.952468-14.21577-5.813402-49.489134-50.720172-129.537262-51.210335-131.189901-51.210336h-0.117681c-10.44284 0-18.968004-7.711636-19.043728-17.272385-0.081864-9.609869 8.332782-17.442254 18.814508-17.549701 3.956102-0.191358 98.505501-0.103354 159.925362 62.84021 7.006578 7.169283 6.320962 18.173918-1.518586 24.583908-3.615341 2.959402-8.146541 4.421706-12.654204 4.421706z m127.597073-0.034792c-4.622274 0-9.267061-1.531889-12.934591-4.649904-7.711636-6.528694-8.18645-17.552771-1.032515-24.602327 63.606667-62.854537 156.236344-62.784952 159.888523-62.644759 10.524704 0.103354 18.952654 7.973602 18.838044 17.58654-0.11461 9.55768-8.599865 17.235546-19.027356 17.235546h-0.150426c-1.581008 0-80.011288 0.471744-131.634016 51.487652-3.730974 3.723811-8.849552 5.587252-13.947663 5.587252z m-33.542954-88.553849h-60.298318c-1.920746 0-3.786233-0.261966-5.559622-0.767479-64.368006-7.556093-119.071909-41.73452-154.328901-96.540754-40.928155-63.656809-50.309826-146.136312-23.309892-205.247594 2.910283-6.355755 9.645684-10.55131 17.185404-10.691503l5.726422-0.051165c36.244482 0 70.097498 6.26775 100.903107 18.665105 22.261003-37.241182 47.679929-65.499783 75.709309-84.164889a19.224854 19.224854 0 0 1 5.059226-2.909259c5.879917-2.331092 12.713556-1.827625 18.093077 1.37737a18.216897 18.216897 0 0 1 2.609431 1.879813c28.101012 18.871813 52.817949 46.713928 75.196633 84.74101 31.413454-12.987802 66.044182-19.569708 103.242385-19.569708l5.820566 0.051166c7.538697 0.140193 14.274098 4.332678 17.181311 10.691503 27.004027 59.125609 17.638729 141.606135-23.326265 205.259874-35.258015 54.775534-89.941452 88.975451-154.293085 96.543823-1.806135 0.455371-3.670599 0.732687-5.610788 0.732687z m-56.914244-34.822086h53.5271c0.399089-0.073678 0.813528-0.121773 1.235131-0.173963 68.804039-7.001461 108.265796-47.37703 129.255853-79.986729 32.135908-49.991578 41.878806-115.318422 25.285896-163.408696-34.630728 1.029446-66.367547 8.79634-94.432743 23.143093-4.586458 2.331092-10.012028 2.821255-14.973016 1.426488-4.987594-1.426489-9.119705-4.682649-11.419074-8.981558-19.291368-36.110429-39.977503-62.681598-62.924122-80.789001-22.962991 18.070564-44.103474 44.833091-62.980403 79.759555-2.299369 4.247744-6.373151 7.452739-11.317766 8.878204a20.554128 20.554128 0 0 1-14.842033-1.303692c-27.473725-13.668301-58.468646-21.10262-92.16919-22.113647-16.58984 48.093345-6.848988 113.417119 25.285896 163.390278 20.990057 32.609699 60.429301 72.970942 129.216967 79.986729 0.414439 0.051165 0.832971 0.099261 1.251504 0.172939z m26.621311 165.641551c-10.504238 0-19.027355-7.78429-19.027356-17.412579v-130.819464c0-9.628288 8.522094-17.409508 19.027356-17.409508 10.501168 0 19.027355 7.78122 19.027355 17.409508v130.819464c-0.017396 9.628288-8.526187 17.412578-19.027355 17.412579z"
                fill="#bfbfbf"
                p-id="23120"
              ></path>
            </svg>
            <i>投票</i>
          </span>
          <!-- 收藏 -->
          <span v-if="collection" @click="collection_off(0)">
            <svg
              t="1717720890650"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5532"
              width="30"
              height="30"
            >
              <path
                d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z"
                fill="#f06464"
                p-id="5533"
              ></path>
            </svg>
            <i>已收藏</i>
          </span>
          <span v-else @click="collection_off(1)">
            <svg
              t="1717720890650"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5532"
              width="30"
              height="30"
            >
              <path
                d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z"
                fill="#bfbfbf"
                p-id="5533"
              ></path>
            </svg>
            <i>收藏</i>
          </span>
        </div>
        <img
          src="../assets/imgs/设计理念.png"
          alt=""
          style="width: 300px; height: 80px; margin-top: -10%;"
        />
        <p>
          {{ detailsList.design_concept }}
        </p>
      </div>
    </div>
    <div class="second-box">
      <div class="info2">
        <img
          src="../assets/imgs/工艺概述.png"
          alt=""
          style="width: 300px; height: 80px"
        />
        <p>
          {{ detailsList.process_overview }}
        </p>
      </div>
      <div class="pic2">
        <img
          v-if="detailsList.images && detailsList.images.length > 1"
          :src="'http://127.0.0.1:8000' + detailsList.images[1].image"
          alt=""
        />
      </div>
    </div>
    <div class="third-box">
      <div class="pic3">
        <img
          v-if="detailsList.images && detailsList.images.length > 2"
          :src="'http://127.0.0.1:8000' + detailsList.images[2].image"
          alt=""
        />
      </div>
      <div class="info3">
        <img
          src="../assets/imgs/细节展示.png"
          alt=""
          style="width: 300px; height: 80px"
        />
        <div class="detail">
          <div class="detail-item">
            <span>名称：</span>
            <span>{{ detailsList.name }}</span>
          </div>
          <div class="detail-item">
            <span>材质：</span>
            <span>{{ detailsList.material }}</span>
          </div>
          <div class="detail-item">
            <span>规格：</span>
            <span>{{ detailsList.size }}</span>
          </div>
          <div class="detail-item">
            <span>颜色：</span>
            <span>{{ detailsList.color }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 评论发布模块 -->
    <div class="pop_up">
      <el-form action="" ref="ratingData" :model="ratingData">
        <div class="pop_up_text">快来发表评论吧</div>
        <div style="display: flex">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入评论内容"
            v-model="ratingData.content"
          >
          </el-input>
          <el-button type="warning" style="padding: 10px" @click="verification"
            >发布评论</el-button
          >
        </div>
      </el-form>
    </div>
    <!-- 评论区 -->
    <div class="comments">
      <div class="notes_title">评论区</div>
      <div class="scrolling" id="crolling">
        <div v-for="(comment, index) in comments_data" :key="index">
          <div class="comments_one">
            <div class="head_shot">
              <img
                v-if="comment.user.avatar"
                :src="`http://127.0.0.1:8000${comment.user.avatar}`"
                alt=""
                width="50"
                height="50"
                style="border-radius: 75px"
              />
              <img
                v-else
                src="@/assets/imgs/默认头像.png"
                alt=""
                style="width: 50px; height: 50px; border-radius: 75px"
              />
              <div style="margin-left: 10px">{{ comment.user.username }}</div>
            </div>
            <div class="comment_details">
              <div class="comment_details_text">
                {{ comment.content }}
              </div>
              <div class="comment_tags">
                <p>发布时间:{{ comment.created_at }}</p>
                <div style="display: flex; align-items: center">
                  <svg
                    t="1709605628741"
                    class="icon"
                    viewBox="0 0 1127 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="16833"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M1108.468296 824.890547C1159.055032 910.219597 1097.227863 1024 990.429373 1024L130.432879 1024C29.258031 1024-32.574625 910.219597 18.012112 824.890547L450.825613 68.266574C473.306472 22.754136 518.276424 0 563.240888 0 608.209469 0 653.173934 22.754136 675.660283 68.266574L1108.468296 824.890547 1108.468296 824.890547 1108.468296 824.890547 1108.468296 824.890547ZM1020.384123 877.110641 1019.583053 875.735153 586.77504 119.111177 583.854223 113.62523C580.333998 106.500274 573.244216 102.4 563.240888 102.4 553.240806 102.4 546.151071 106.500212 542.636068 113.61633L539.710577 119.111663 106.096287 877.110641C95.301134 895.319767 109.937021 921.6 130.432879 921.6L990.429373 921.6C1016.30634 921.6 1031.298263 895.520476 1020.384123 877.110641L1020.384123 877.110641 1020.384123 877.110641 1020.384123 877.110641ZM558.08319 307.2C532.482248 307.2 512 322.819385 512 342.344809L512 579.251379C512 598.776801 532.482248 614.4 558.08319 614.4L568.321812 614.4C593.922749 614.4 614.4 598.776801 614.4 579.251379L614.4 342.344809C614.4 322.819385 593.922749 307.2 568.321812 307.2L558.08319 307.2 558.08319 307.2 558.08319 307.2 558.08319 307.2ZM512 766.885176C512 780.001705 517.522432 793.032632 526.999818 802.305669 536.477199 811.577487 549.797038 816.975247 563.200625 816.975247 576.602962 816.975247 589.927798 811.577487 599.405184 802.305669 608.882565 793.032632 614.4 780.001705 614.4 766.885176 614.4 753.772319 608.882565 740.741391 599.405184 731.469573 589.927798 722.19776 576.602962 716.8 563.200625 716.8 549.797038 716.8 536.477199 722.19776 526.999818 731.469573 517.522432 740.741391 512 753.772319 512 766.885176L512 766.885176 512 766.885176 512 766.885176Z"
                      fill="#2c2c2c"
                      p-id="16834"
                    ></path>
                  </svg>
                  <span><a href="">举报</a></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 30px"></div>
  </div>
</template>

<script>
import { poststyleRating, getstyleRating } from "@/api/rating";
import {
  getstylesDetails,
  getfavorite,
  delfavorite,
  getvoting,
  delvoting,
} from "@/api/classification.js";
import { Message } from "element-ui";
export default {
  data() {
    return {
      id: "",
      detailsList: {
        designer: {
          avatar: "",
          username: "",
          phone: "",
          email: "",
        },
      },
      collection: false, // 收藏
      voting: false, //投票
      // 发送评论数据
      ratingData: {
        // 作品id
        style: "",
        // 内容
        content: "",
      },
      // 保存全部评论
      comments_data: [],
    };
  },
  created() {
    this.getDetails(this.$route.query.id);
    setTimeout(() => {
      this.get_all_comments();
    }, 500);
  },
  methods: {
    // 获取风格详情
    getDetails(id) {
      getstylesDetails(id).then((res) => {
        this.detailsList = res;
        this.collection = this.detailsList.is_favorited;
        this.voting = this.detailsList.is_voting;
      });
    },
    // 评论发布方法
    verification() {
      // 作品id
      this.ratingData.style = this.$route.query.id;
      if (this.ratingData.content === "") {
        alert("不能发送空评论哦");
      } else {
        poststyleRating(this.ratingData).then((res) => {
          console.log(res);
          Message({
            message: "评论发布成功",
            type: "success",
          });
          this.ratingData.content = "";
          this.get_all_comments();
        });
      }
    },
    // 获取所有评论
    get_all_comments() {
      getstyleRating(this.detailsList.id)
        .then((res) => {
          this.comments_data = res;
        })
        .catch((error) => {
          console.error("获取评论时出现错误:", error);
        });
    },
    // 收藏方法
    collection_off(x) {
      if (x === 1) {
        getfavorite(this.detailsList.id).then((res) => {
          this.$message({
            message: "您收藏成功",
            type: "success",
          });
          this.collection = true;
        });
      } else if (x === 0) {
        delfavorite(this.detailsList.id).then((res) => {
          this.$message({
            message: "您已取消收藏",
            type: "success",
          });
          this.collection = false;
        });
      }
    },
    // 投票方法
    voting_off(y) {
      if (y === 1) {
        getvoting(this.detailsList.id).then((res) => {
          this.$message({
            message: "您投票成功",
            type: "success",
          });
          this.voting = true;
        });
      } else if (y === 0) {
        delvoting(this.detailsList.id).then((res) => {
          this.$message({
            message: "您已取消投票",
            type: "success",
          });
          this.voting = false;
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  .top-box {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    .pic1 {
      width: 450px;
      height: 550px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info1 {
      width: 450px;
      height: 550px;
      margin-left: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      h2{
        margin-top: -20%;
      }
      .btns {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-top: -10%;
        span {
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          line-height: 5px;
          margin-left: 10px;
          i {
            // 取消斜体
            font-style: normal;
            font-size: 16px;
            color: #333333;
            margin-left: 5px;
          }
        }
      }
      p {
        font-size: 18px;
        line-height: 35px;
        margin-top: -10%;
      }
    }
  }
  .second-box {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    .pic2 {
      width: 20%;
      height: 20%;
      margin-left: 180px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info2 {
      width: 370px;
      height: 370px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      p {
        font-size: 18px;
        line-height: 35px;
      }
    }
  }
  .third-box {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    .pic3 {
      width: 20%;
      height: 20%;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .info3 {
      width: 370px;
      height: 370px;
      margin-left: 180px;
      margin-bottom: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;

      .detail {
        width: 440px;
        height: 190px;
        background-color: #f3ca7e;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.1);
        .detail-item {
          font-size: 18px;
          line-height: 35px;
          color: #333333;
        }
      }
    }
  }
  // 发布评论模块
  .pop_up {
    width: 1180px;
    height: 100px;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    margin: 0 auto;
    z-index: 999;
    .pop_up_text {
      font-size: 20px;
      font-weight: 700;
      padding-bottom: 10px;
    }
  }
  /* 评论区 */
  .comments {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: center;
    .notes_title {
      font-size: 20px;
      font-weight: 700;
    }
    .comments_one {
      display: flex;
      padding: 10px;
      border-bottom: 2px solid #cfcfcf;
      .head_shot {
        display: flex;
        width: 250px;
        justify-content: flex-start;
        align-items: center;
        /* 评论头像 */
        .head_shot {
          img {
            padding: 5px;
            border-radius: 10px;
          }
        }
        /* 评论名字 */
        .head_shot {
          div {
            font-size: 18px;
            height: 30px;
            line-height: 30px;
            font-weight: 700;
            color: #595959;
          }
        }
      }
    }
    .comment_details {
      padding: 5px;
      width: 930px;
      .comment_details_text {
        word-wrap: break-word;
        font-size: 18px;
      }
      .comment_tags {
        display: flex;
        margin-top: 20px;
        justify-content: space-between;
      }
      .comment_tags a {
        text-decoration: none;
        color: #4f4f4f;
      }

      .comment_tags div span {
        padding: 0 10px 0 10px;
      }
    }
  }
}
</style>
